import Taro, {
  Component
} from '@tarojs/taro'
import {
  View,
  Text
} from '@tarojs/components'
import './userEdit.css'
import {
  AtButton,
  AtInput,
  AtIcon,
  AtGrid
} from 'taro-ui'

export default class UserEdit extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: {}
    }
  }
  config = {
    navigationBarTitleText: '账号管理'
  }

  // 页面被载入
  componentWillMount() {
    this.render();
  }

  // 页面渲染完成 
  componentDidMount() {}

  // 页面展示出来 
  componentDidShow() {}

  // 页面被隐藏 
  componentDidHide() {}

  render() {
    return (
      <View className='index'>
        <View className='at-row user-header'>
          <View className='at-col at-col-1'>
            <AtIcon value='' size='30' color='#FFF'></AtIcon>
          </View>
          <View className='at-col at-col-10'>账号管理</View>
          <View className='at-col at-col-1'></View>
        </View>
        <View className='at-row user-footer'>
          <View className='at-col at-col-12'>退出</View>
        </View>

        <View className='at-row at-row--wrap user-list'>
          <View className='at-col at-col-11'>
            <View className='at-row at-row--wrap'>
              <View className='at-col at-col-3 uesr-avatar'></View>
              <View className='at-col at-col-9'>
                <View className='at-row at-row--wrap user-info'>
                  <View className='at-col at-col-12 user-name'>jchjshjkf</View>
                  <View className='at-col at-col-12'>dsgjhgfghg</View>
                </View>
              </View>
            </View>
          </View>
        </View>
        <View className='at-row at-row--wrap user-list'>
          <View className='at-col at-col-11'>
            <View className='at-row at-row--wrap'>
              <View className='at-col at-col-6 at-col-left'>账号安全</View>
              <View className='at-col at-col-6 at-col-right'>高</View>
            </View>
          </View>
        </View>
        <View className='at-row at-row--wrap user-list'>
          <View className='at-col at-col-11'>
            <View className='at-row at-row--wrap border-btm'>
              <View className='at-col at-col-6 col-line-height at-col-left'>登陆密码</View>
              <View className='at-col at-col-6 col-line-height at-col-right'>修改密码</View>
            </View>
            <View className='at-row at-row--wrap border-btm'>
              <View className='at-col at-col-6 col-line-height at-col-left'>手机</View>
              <View className='at-col at-col-6 col-line-height at-col-right'>未绑定</View>
            </View>
            <View className='at-row at-row--wrap'>
              <View className='at-col at-col-6 col-line-height at-col-left'>邮箱</View>
              <View className='at-col at-col-6 col-line-height at-col-right'>未绑定</View>
            </View>
          </View>
        </View>
        <View className='at-row at-row--wrap user-list'>
          <View className='at-col at-col-11'>
            <View className='at-row at-row--wrap border-btm'>
              <View className='at-col at-col-6 col-line-height at-col-left'>姓名</View>
              <View className='at-col at-col-6 col-line-height at-col-right'>冯先生</View>
            </View>
            <View className='at-row at-row--wrap border-btm'>
              <View className='at-col at-col-6 col-line-height at-col-left'>职位</View>
              <View className='at-col at-col-6 col-line-height at-col-right'>老板</View>
            </View>
            <View className='at-row at-row--wrap'>
              <View className='at-col at-col-6 col-line-height at-col-left'>QQ</View>
              <View className='at-col at-col-6 col-line-height at-col-right'>未绑定</View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}